<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :show-close="true"
      width="700"
      :close-on-click-modal="false"
    >
      <template #header="{ titleId }">
        <div
          class="my-header"
          style="border-bottom: 1px solid #ccc; padding-bottom: 10px"
        >
          <span :id="titleId" style="margin-right: 20px">项目管理</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="detailMsg"
        :rules="rules"
        style="max-width: 650px"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="项目名称:" prop="name">
          <el-input v-model="detailMsg.name" />
        </el-form-item>
        <el-form-item label="查验类型:">
          <el-select
            v-model="detailMsg.type"
            clearable
            placeholder="选择查验类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属小区:">
          <el-select
            v-model="detailMsg.communityname"
            clearable
            placeholder="选择小区"
            style="width: 100%"
          >
            <el-option
              v-for="item in props.CommunityList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="查验模板:">
          <el-select
            v-model="detailMsg.templatename"
            clearable
            placeholder="选择项目模板"
            style="width: 100%"
          >
            <el-option
              v-for="item in listTemplate"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="查验人员:">
          <el-select
            v-model="detailMsg.testname"
            clearable
            placeholder="选择查验人员"
            style="width: 100%"
          >
            <el-option
              v-for="item in userList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="查验期限:">
          <el-date-picker
            v-model="detailMsg.value1"
            type="datetimerange"
            start-placeholder="请选择起始时间"
            end-placeholder="请选择截止时间"
          />
        </el-form-item>
        <el-form-item label="项目备注:">
          <el-input v-model="detailMsg.remarks" type="textarea" />
        </el-form-item>

        <el-form-item>
          <el-button @click="submitForm(ruleFormRef)"> 重置 </el-button>
          <el-button type="primary" @click="resetForm(ruleFormRef)"
            >发布</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup >
import { ref, reactive, onMounted } from "vue";

import { projectDetailApi } from "@/api/article";
const value1 = ref([
  new Date(2000, 10, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10, 10),
]);
const listTemplate = ref([]);
const aa = async () => {
  const res = await projectDetailApi({ id: detailMsg.value.id });
  console.log(res.data.data, "res");
  listTemplate.value = [];
  res.data.data.forEach((x) => {
    Object.assign(x, {
      label: x.temname,
      value: x.id,
    });
    listTemplate.value.push(x);
  });
};
const dialogVisible = ref(false);
const detailMsg = ref({});
const props = defineProps({
  CommunityList: {
    type: Array,
    default: () => [],
  },
  userList: {
    type: Array,
    default: () => [],
  },
});
const open = (row) => {
  console.log(row, "row");
  detailMsg.value = row;
  detailMsg.value = Object.assign(row, {
    value1: [new Date(row.starttime), new Date(row.endtime)],
  });
  console.log(detailMsg, "detailMsg");
  dialogVisible.value = true;
  aa();
};
const type = [
  {
    value: 1,
    label: "常规检查",
  },
  {
    value: 2,
    label: "街道巡检",
  },
];
const ruleForm = reactive({
  name: "",
  type: "",
});

const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});
defineExpose({
  open,
});
</script>
<style lang='less' scoped>
</style>